<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('居民户籍信息')" />
    <style>

    </style>
</head>
<body>
<div class="container-div">
    <div class="wrapper wrapper-content animated fadeInRight">
        <form>
            <input name="xianId" type="hidden" th:if="${xianId != null}" th:value="xianId">
        </form>
        <div class="row">
            <div class="col-md-12 search-collapse">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-pie-chart1"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-pie-chart2"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 select-table table-bordered">
                <div class="btn-group-sm">
                    <a class="btn btn-primary" onclick="$.table.exportExcel()">
                        <i th:text="下载表格"  class="fa fa-download"></i>
                    </a>
                    <a class="btn btn-warning" id="contentFileUpload" onclick="reportData()">
                        <i th:text="上报数据" class="fa fa-upload"></i>
                    </a>
                    <label class="col-md-offset-1" th:text="总购洁净煤：+ ${totalAmount==null ? '0' : totalAmount}+吨"></label>
                </div>
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    var prefix = ctx + "jjm/xian";
    function reportData() {
        $.ajax({
            type : "get",
            contentType: "application/json;charset=UTF-8",
            url : prefix + "/reportData",
            dataType:'json',
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
                $.modal.disable();
            },
            success : function(result) {
                if(result.code == 0){
                    $.modal.msgSuccess('上报成功');
                }else{
                    $.modal.alertError(result.msg);
                }
                $.modal.closeLoading();
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                $.modal.alertError('上报失败，请重试');
                $.modal.closeLoading();
            }
        });
    }
    var xianId = [[${xianId}]];
    var url = prefix + "/tableInfo";
    var exportUrl = prefix+"/export";
    if(xianId){
        exportUrl = exportUrl + "?countyId="+xianId;
    }
    if(xianId){
        url = url.concat("?xianId=" + xianId);
    }
    var titleText = '洁净煤入户率';
    var pieChart = echarts.init(document.getElementById("echarts-pie-chart1"));
    var pieoption = {
        title : {
            text: titleText,
            subtext: '',
            x:'right'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['洁净煤已入户','洁净煤未入户']
        },
        calculable : true,

        series : [
            {
                name:'洁净煤入户率',
                type:'pie',
                radius : '90%',
                center: ['50%', '50%'],
                label: {
                    normal: {
                        show:false
                    }
                },
                data:[
                    {value:[[${chartInfo.cleanCoalNum - chartInfo.notCleanCoalNum}]], name:'洁净煤已入户'},
                    {value:[[${chartInfo.notCleanCoalNum}]], name:'洁净煤未入户'}
                ]
            }
        ]
    }
    pieChart.setOption(pieoption);
    var pieChart2 = echarts.init(document.getElementById("echarts-pie-chart2"));
    var titleText2 = '居民取暖季取暖\n方式比例';
    var pieoption2 = {
        title : {
            text: titleText2,
            subtext: '',
            x:'right'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['洁净煤取暖户数','采用其他方式取暖户数','冬季不取暖户数','生物质取暖户数']
        },
        calculable : true,
        series : [
            {
                name:'居民取暖季取暖方式比例',
                type:'pie',
                radius : '90%',
                center: ['55%', '50%'],
                label: {
                    normal: {
                        show:false
                    }
                },
                data:[
                    {value:[[${chartInfo.cleanCoalNum}]], name:'洁净煤取暖户数'},
                    {value:[[${chartInfo.otherWarmNum}]], name:'采用其他方式取暖户数'},
                    {value:[[${chartInfo.notWarmNum}]], name:'冬季不取暖户数'},
                    {value:[[${chartInfo.biomassWarmNum}]], name:'生物质取暖户数'}
                ]
            }
        ]
    }
    pieChart2.setOption(pieoption2);
    $(function(){
        var options = {
            url : url,
            exportUrl: exportUrl,
            modalName: "居民户籍信息",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            columns:[
                [{
                    field: 'id',
                    title: '编号',
                    rowspan : 2,
                    align: "center",
                    valign: "middle"
                }, {
                    field: 'countyName',
                    title: '县（市区）',
                    rowspan : 2,
                    align: "center",
                    valign: "middle"
                }, {
                    field: 'accurateNum',
                    title: titleValue('精准确村<br>确户总户数'),
                    rowspan : 2,
                    align: "center",
                    valign: "middle"
                }, {
                    field: 'householdsNum',
                    title: titleValue('常住人<br>口户数'),
                    rowspan : 2,
                    align: "center",
                    valign: "middle"
                }, {
                    field: 'cleanCoalNum',
                    title: titleValue('洁净煤取<br>暖户数'),
                    rowspan : 2,
                    align: "center",
                    valign: "middle"
                }, {
                    field: 'notCleanCoalNum',
                    title: titleValue('洁净煤<br>未入户数'),
                    rowspan : 2,
                    align: "center",
                    valign: "middle"
                }, {
                    field: 'otherWarmNum',
                    title: titleValue('采用其他方<br>式取暖户数'),
                    rowspan : 2,
                    align: "center",
                    valign: "middle"
                }, {
                    field: 'notWarmNum',
                    title: titleValue('冬季不<br>取暖户数'),
                    rowspan : 2,
                    align: "center",
                    valign: "middle"
                },{
                    field: 'biomassWarmNum',
                    title: titleValue('生物质<br>取暖户数'),
                    rowspan : 2,
                    align: "center",
                    valign: "middle"
                }, {
                    field: '',
                    title: '县',
                    align: "center",
                    colspan : 2,
                    valign: "middle"
                },{
                    field: '',
                    title: '乡镇',
                    align: "center",
                    colspan : 2,
                    valign: "middle"
                }, {
                    field: '',
                    title: '村',
                    align: 'center',
                    colspan : 2,
                    valign: "middle"
                },{
                    field: 'totalBuyNum',
                    title: titleValue('总购洁<br>净煤数(吨)'),
                    rowspan : 2,
                    align: "center",
                    valign: "middle"
                },{
                    title: '操作',
                    align: 'center',
                    rowspan : 2,
                    valign: "middle",
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="$.modal.openTab(\''+row.countyName+'居民户籍信息\',\'/jjm/xian/info?xianId=' + row.countyId + '\')"><i class="fa fa-edit"></i>查看详情</a> ');
                        return actions.join('');
                    }
                }],[
                    {
                        field: 'countyBlNum',
                        title: '县级包联人数',
                        rowspan : 1,
                        align: "center",
                        valign: "middle"
                    },
                    {
                        field: 'countyBlTownNum',
                        title: '包联乡镇数',
                        rowspan : 1,
                        align: "center",
                        valign: "middle"
                    },
                    {
                        field: 'townBlNum',
                        title: '乡镇包联人数',
                        rowspan : 1,
                        align: "center",
                        valign: "middle"
                    },
                    {
                        field: 'townBlVillageNum',
                        title: '包联村数',
                        rowspan : 1,
                        align: "center",
                        valign: "middle"
                    },
                    {
                        field: 'villageBlNum',
                        title: titleValue('村级包<br>联人数'),
                        rowspan : 1,
                        align: "center",
                        valign: "middle"
                    }, {
                        field: 'villageBlHouseNum',
                        title: titleValue('包联<br>户数'),
                        align: "center",
                        valign: "middle"
                    }
                ]]
        };
        $.table.init(options);
    });
</script>
</body>
</html>